<template>
  <div class="main-border">
    <el-button type="text" @click="openAdd">发布话题</el-button>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item) in topicType" :label="item.label" :name="item.name">
        <el-table :data="topicList"
                  stripe
                  style="width: 100%;color: #5a5c61;">
          <el-table-column
              prop="topicName"
              label="话题名称"
              show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="danger"
                  @click="openEdit(scope.$index)"> 修改
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="makeOfflineScience(scope.$index)"> 下架
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!--  新增话题弹窗  -->
    <el-dialog
        title="发布话题"
        :visible.sync="dialogVisible"
        width="60%">
      <el-form class="release-tea-container-form">
        <div class="release-tip">话题名称</div>
        <el-input placeholder="请输入话题名称" v-model="topicInfoForm.topicName"
                  maxlength="30"
                  show-word-limit>
        </el-input>
        <div v-show="!topicInfoForm.topicId" style="display: flex; justify-content: space-between;">
          <div>
            <div class="release-tip">话题类别</div>
            <el-select v-model="topicInfoForm.topicType" placeholder="请选择类别">
              <el-option
                  v-for="item in topicType"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import options from "@/components/common/country-data";

export default {
  name: "topic",
  data() {
    return {
      topicType: [
        {label: "茶叶", name: "1"},
        {label: "茶叶冲泡", name: "2"},
        {label: "茶叶功效", name: "3"},
        {label: "茶叶存放", name: "4"},
      ],
      activeName: 1,
      mode: 1,
      nowPage: 1,
      total: 0,
      topicList: [
      ],
      dialogVisible: false,
      topicInfoForm: {
        topicType: '',
        topicName: '',
      },
      imgDialogVisible: false,
      dialogImageUrl: '',
      showFileList: true,
      options: options,
      selectedOptions: [],
      imgList: [],
      videoForm: {videoId: '', videoUrl: ''},
      videoFlag: false,
      videoUploadPercent: 0
    }
  },
  created() {
    this.getTopicList();
  },
  methods: {
    handleCurrentChange(val) {
      this.nowPage = val;
      if (this.mode == 1) {
        this.getOnlineGoods();
      }
      if (this.mode == 2) {
        this.getOfflineGoods();
      }
    },
    makeOfflineScience(i) {
      this.$api.delTopic({
        id: this.topicList[i].topicId,
      }).then(res => {
        if (res.status_code == 1) {
          this.getTopicList();
        } else {
          this.$message.error(res.msg)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    getTopicList() {
      this.$api.getTopicList({
        page: this.nowPage,
        nums: 8
      }).then(res => {
        console.log(res)
        if (res.status_code == 1) {
          this.topicList = []
          // this.topicList = res.data.list
          res.data.list.forEach(item => {
            console.log(Number(this.activeName))
            if (item.topicType == (Number(this.activeName))) {
              console.log(item)
              this.topicList.push(item)
            }
          });
          this.total = res.data.count;
        } else {
          this.$message.error(res.msg)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    getOfflineSciences() {
      this.$api.getscienceItem({
        status: 2,
        page: this.nowPage,
        nums: 8
      }).then(res => {
        if (res.status_code == 1) {
          this.OfflineSciences = res.data.list;
          this.total = res.data.count;
        } else {
          this.$message.error(res.msg)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    handleClose() {
      console.log(this.scienceItemInfo);
      if (this.topicInfoForm.topicType &&
          this.topicInfoForm.topicName ) {
        if (!this.topicInfoForm.topicId) {
          this.$api.addTopic(this.topicInfoForm).then(res => {
            if (res.status_code === 1) {
              this.$message({
                message: '发布成功！',
                type: 'success'
              });
              console.log(res.data);
              this.dialogVisible = false;
              this.topicInfoForm ={
                topicType: '',
                topicName: '',
              }
              this.getTopicList();
            } else {
              this.$message.error('发布失败！' + res.msg);
            }
          }).catch(e => {
            // this.$message.error('请填写完整信息');
          })
        }else {
          this.$api.updateTopic(this.topicInfoForm).then(res => {
            if (res.status_code === 1) {
              this.$message({
                message: '修改成功！',
                type: 'success'
              });
              console.log(res.data);
              this.dialogVisible = false;
              this.topicInfoForm = {
              }
              this.getTopicList()
            } else {
              this.$message.error('修改失败！' + res.msg);
            }
          })
        }
      } else {
        this.$message.error('请填写完整信息！');
      }
    },
    handleClick(tab, event) {
      console.log(tab.index);
      this.getTopicList();
    },
    //   打开新增窗口
    openAdd() {
      this.dialogVisible = true;
      this.title = "发布话题";
      this.topicInfoForm = {};
    },
    //   打开修改窗口
    openEdit(i) {
      console.log(this.topicList[i])
      this.dialogVisible = true;
      this.title = "修改话题";
      this.$api.getTopic({
        id: this.topicList[i].topicId,
      }).then(res => {
        console.log(res.data);
        this.topicInfoForm = res.data;
        console.log(this.topicInfoForm)
      })
    }
  },
  mounted() {
    // this.listType()
  }

}
</script>

<style scoped>

.main-border {
  background-color: #FFF;
  padding: 10px 30px;
  box-shadow: 0 1px 15px -6px rgba(0, 0, 0, .5);
  border-radius: 5px;
}

.block {
  display: flex;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 10px;
  width: 100%;
}

.release-tea-container-form {
  padding: 0 180px;
}

.release-tea-detiles-text {
  margin: 20px 0;
}

.release-tea-place {
  margin-bottom: 15px;
}

.release-tip {
  color: #555555;
  float: left;
  padding-right: 5px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}

.release-tea-container-picture {
  width: 500px;
  height: 400px;
  margin: 20px 0;

}

.release-tea-container-picture-title {
  margin: 10px 0;
  color: #555555;
  font-size: 14px;
}

.picture-list {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100px;
}
</style>